<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>用户认证</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/wechat/ver.css">
    <script type="text/javascript" src="__JS__/jquery.js"></script>
</head>
<body>
    <div id="main">
        <form action="{{:url('Cons/reg')}}" method="post" enctype="multipart/form-data">
            <div class="must">
                <p class="list" did="'+i+'">
                    <span class="listName">身份类型</span>
                    <span class="sele" dtype="type">
                        <b>请选择</b>
                        <span class="iconBox">
                            <i></i>
                        </span>
                        <input name="type" autocomplete="off">
                    </span>
                </p>
                <div class="mustList"></div>
            </div>
            <div class="mabey">
                
            </div>
            <div class="subBox">
                <button type="button">提交</button>
            </div>
        </form>
    </div>
    <div id="msgBox">
        <span></span>
    </div>
    <div id="modalBox">
        <div class="modal">
            <div class="title">
                <span class="iconBox"><i class="close"></i></span>
                <div class="title">
                    <span>身份类型</span>
                </div>
            </div>
            <div class="sfList">
                <div class="center">
                    <div class="listBox">
                        <ul>

                        </ul>
                    </div>
                    <div class="btnBox">
                        <span class="btn">确定</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="bigCla">
                    <ul>
                        
                    </ul>
                </div>

                <div class="sfBox">
                    <div class="smallCla">
                        <ul>

                        </ul>
                    </div>

                    <div class="shenfen">
                        <ul>

                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

    <div id="sexPlace">
        <div class="modal">
            <div class="title">
                <span class="iconBox"><i class="close"></i></span>
                <div class="title">
                    <span>选择地区</span>
                </div>
            </div>
            <div class="sexMain">
                <div class="text">
                
                </div>
                <div class="content">
                    <ul>

                    </ul>
                </div>
                <div class="alert">
                    <p>
                        <span>加载中，请稍后...</span>
                    </p>
                </div>
            </div>
            
        </div>
    </div>
<script type="text/javascript">
    var user = {
        sfArr:[],       // 所选身份ID集合
        sfNameArr:[],   // 所选身份名字集合
        sfShowArr:[],   // 最终提交身份的名字集合
        sfShowIdArr:[], // 最终提交身份的ID集合
        placeArr:[],    // 所选省市区集合
        placeIdArr:[],  // 所选省市区ID集合
        msgAlertKg:true,
        all:[
            {lName:"姓名",name:"name"},
            {lName:"性别",name:"sex"},
            {lName:"所属公司",name:"company"},
            {lName:"身份证号",name:"idcode"},
            {lName:"所在地区",name:"place",type:["pid","cid","aid"]},
            {lName:"手机",name:"phone"},
            {lName:"邮件",name:"email"},
            {lName:"身份证正面",name:"id_just"},
            {lName:"身份证背面",name:"id_back"},
            {lName:"头像",name:"photo"},
        ],
        optional:[
            {lName:"合作伙伴合约",name:"contract_1",into:[43,44]},
            {lName:"代理商营业执照",name:"license_2",into:[46,47,48]},
            {lName:"代理商合约",name:"contract_2",into:[46,47,48]},
            {lName:"工牌",name:"wcard",into:[]}, // workCard函数 为 into 赋值
            {lName:"推荐人手机号",name:"tel",into:[50,51]},
            {lName:"单体工程师证书",name:"cert_d",into:[35]},
            {lName:"中央工程师证书",name:"cert_z",into:[37]},
            {lName:"冷库工程师证书",name:"cert_l",into:[39]},
            {lName:"技术人员证书",name:"cert_2",into:[53]},
            {lName:"维保人员证书",name:"cert_3",into:[55]},
            {lName:"外部工程师证书",name:"cert_4",into:[52]},
            {lName:"外包工程商营业执照",name:"license_1",into:[57,58,59]},
            {lName:"外包工程商合约",name:"contract_3",into:[57,58,59]}
        ],
        onlyNoName:[
            {lName:"头像",name:"photo"},
            {lName:"推荐人手机号",name:"tel"}
        ],
        iden:[
            {// 最高层
                type:"董事",
                depa:[
                    {
                        type:"董事",
                        people:[
                            {id:1,name:"董事会"},
                            {id:2,name:"董事长兼总裁"},
                            {id:3,name:"总裁助理"},
                            {id:4,name:"总经理"},
                        ]
                    }
                ]
            },
            {// 行政中心
                type:"行政中心",
                depa:[
                    { // 总监
                        type:"总监",
                        people:[
                            {id:5,name:"行政中心总监"}
                        ]
                    },
                    { // 人事部
                        type:"人事部",
                        people:[
                            {id:13,name:"人事部专员"}
                        ]
                    },
                    { // 后勤部
                        type:"后勤部",
                        people:[
                            {id:14,name:"采购"},
                            {id:15,name:"商务助理"}
                        ]
                    },
                    { // 企划部
                        type:"企划部",
                        people:[
                            {id:12,name:"企划部主管"},
                            {id:16,name:"平面设计"},
                            {id:17,name:"文案策划"},
                            {id:18,name:"网络"}
                        ]
                    }
                ]
            },
            {// 财务中心
                type:"财务中心",
                depa:[
                    { // 总监
                        type:"总监",
                        people:[
                            {id:6,name:"财务中心总监"}
                        ]
                    },
                    { // 财务部
                        type:"财务部",
                        people:[
                            {id:19,name:"会计"},
                            {id:20,name:"财税规划"},
                            {id:21,name:"出纳"}
                        ]
                    }
                ]
            },
            {// 业务中心
                type:"业务中心",
                depa:[
                    { // 总监
                        type:"总监",
                        people:[
                            {id:7,name:"业务中心总监"}
                        ]
                    },
                    { // 直客部
                        type:"直客部",
                        people:[
                            {id:25,name:"直客部主管"},
                            {id:26,name:"直客部专员"}
                        ]
                    },
                    { // 直客部
                        type:"渠道部",
                        people:[
                            {id:27,name:"渠道部主管"},
                            {id:28,name:"渠道部专员"}
                        ]
                    },
                    { // 直客部
                        type:"客服部",
                        people:[
                            {id:29,name:"客服部主管"},
                            {id:30,name:"客服部专员"}
                        ]
                    }
                ]
            },
            {// 工程中心
                type:"工程中心",
                depa:[
                    { // 总监
                        type:"总监",
                        people:[
                            {id:8,name:"工程中心总监"}
                        ]
                    },
                    { // 单体施工
                        type:"单体施工",
                        people:[
                            {id:34,name:"单体施工主管"},
                            {id:35,name:"单体施工工程师"}
                        ]
                    },
                    { // 中央施工
                        type:"中央施工",
                        people:[
                            {id:36,name:"中央施工主管"},
                            {id:37,name:"中央施工工程师"}
                        ]
                    },
                    { // 冷酷施工
                        type:"冷库施工",
                        people:[
                            {id:38,name:"冷库施工主管"},
                            {id:39,name:"冷库施工工程师"}
                        ]
                    }
                ]
            },
            {// 研发中心
                type:"研发中心",
                depa:[
                    { // 总监
                        type:"总监",
                        people:[
                            {id:9,name:"研发中心总监"}
                        ]
                    },
                    { // 研发部
                        type:"研发部",
                        people:[
                            {id:40,name:"实验"},
                            {id:41,name:"研发"}
                        ]
                    }
                ]
            },
            {// 合作伙伴
                type:"合作伙伴",
                depa:[
                    { // 合作伙伴
                        type:"合作伙伴",
                        people:[
                            {id:43,name:"个人合伙人"},
                            {id:44,name:"经纪人"}
                        ]
                    }
                ]
            },
            {// 代理商
                type:"代理商",
                depa:[
                    { // 代理商
                        type:"代理商",
                        people:[
                            {id:46,name:"省级代理商"},
                            {id:47,name:"市级代理商"},
                            {id:48,name:"区级代理商"}
                        ]
                    }
                ]
            },
            {// 资源人
                type:"资源人",
                depa:[
                    { // 资源人
                        type:"资源人",
                        people:[
                            {id:50,name:"公开资源人"},
                            {id:51,name:"匿名资源人"}
                        ]
                    }
                ]
            },
            {// 外部人员
                type:"外部人员",
                depa:[
                    { // 外部人员
                        type:"外部人员",
                        people:[
                            {id:52,name:"外部工程师"},
                            {id:53,name:"外部技术人员"},
                            {id:55,name:"外部维保人员"}
                        ]
                    }
                ]
            },
            {// 外包工程商
                type:"外包工程商",
                depa:[
                    { // 外包工程商
                        type:"外包工程商",
                        people:[
                            {id:57,name:"一级工程商"},
                            {id:58,name:"二级工程商"},
                            {id:59,name:"三级工程商"}
                        ]
                    }
                ]
            }
        ],
        initAll:function(){
            var html = "";
            for(var i = 0; i < this.all.length; i++){
                var name = this.all[i].name;
                if(name == "sex"){
                    html += '<p class="list" did="'+i+'"><span class="listName">'+this.all[i].lName+'</span><span class="sele" dtype="'+this.all[i].name+'"><select name="'+this.all[i].name+'"><option value="1">男</option><option value="2">女</option></select></span></span></p>'
                }else if(name == "place"){
                    html += '<p class="list" did="'+i+'"><span class="listName">'+this.all[i].lName+'</span><span class="sele" dtype="place"><b>请选择</b><span class="iconBox"><i></i></span><input name="'+this.all[i].type[0]+'" autocomplete="off"><input name="'+this.all[i].type[1]+'" autocomplete="off"><input name="'+this.all[i].type[2]+'" autocomplete="off"></span></p>'
                }else if(name == "id_just" || name == "id_back" || name == "photo"){
                    html += '<p class="list" did="'+i+'"><span class="listName">'+this.all[i].lName+'</span><label class="sele" dtype="'+this.all[i].name+'"><b>请选择</b><span class="iconBox"><i></i></span><input type="file" name="'+this.all[i].name+'"></label></p>'
                }else{
                    html += '<p class="list" did="'+i+'"><span class="listName">'+this.all[i].lName+'</span><input type="text" name="'+this.all[i].name+'" autocomplete="off"></p>'
                }
            }
            $("#main .must .mustList").html(html);
        },
        modalShow:function(){
            $("#modalBox").show().css({left:"100%"}).animate({
                left:0
            },300);
            if(this.sfArr.length > 0){
                $("#modalBox .sfList").show();
            }
        },
        modalHide:function(id){
            $(id).animate({
                left:"100%"
            },300,function(){
                $(this).hide();
            });
            
            if(id == "#sexPlace"){
               if(this.placeArr.length >= 3){
                    $(id).find(".content ul").html("");
                } 
                for(var i =0; i<this.placeIdArr.length;i++){
                    $(".sele[dtype='place'] input").eq(i).val(this.placeIdArr[i]);
                }
            }
        },
        sexPlaceModalShow:function(){
            $("#sexPlace").show().css({left:"100%"}).animate({
                left:0
            },300);
        },
        clickSele:function(){
            var _this = this;
            $("body").on("click",".sele",function(e){
                var dtype = $(this).attr("dtype");
                switch(dtype){
                    case "type":
                        _this.modalShow();
                        var html = "";
                        for(var i = 0; i<_this.iden.length; i++){
                            html += "<li did='"+i+"'>"+_this.iden[i].type+"</li>"
                        }
                        $(".bigCla ul").html(html);
                        _this.searchBm(0);
                        _this.searchSf(0,0);
                        $(".bigCla ul li").eq(0).addClass("bigActive");
                        $(".smallCla ul li").eq(0).addClass("smallActive");
                        _this.queryIden();
                        break;
                    case "place":
                        _this.sexPlaceModalShow();
                }
            });
        },
        bigClaClick:function(){ // 侧边大分类点击
            var _this = this;
            $("body").on("click",".bigCla ul li",function(){
                $(this).addClass("bigActive").siblings().removeClass("bigActive");
                var id = $(this).attr("did");
                _this.searchBm(id);
                _this.searchSf(id,0);
                $(".smallCla ul li").eq(0).addClass("smallActive");
                _this.queryIden();
            })
        },
        smallClaClick:function(){ // 右上方部门点击
            var _this = this;
            $("body").on("click",".smallCla ul li",function(){
                $(this).addClass("smallActive").siblings().removeClass("smallActive");
                var id = $(this).attr("did");
                var pid = $(this).attr("pid");
                _this.searchSf(pid,id);
                _this.queryIden();
            })
        },
        searchBm:function(id){// 显示小部门
            var str = "";
            for(var i=0; i<this.iden[id].depa.length; i++){
                str += "<li did="+i+" pid="+id+">"+this.iden[id].depa[i].type+"</li>"
            }
            $(".smallCla ul").html(str);
            var num = $(".smallCla ul li").length;
            if(num <=3 ){
                $(".smallCla ul").css({width:"100%"});
                $(".smallCla ul li").css({width:100/num+"%"});
            }else{
                $(".smallCla ul li").css({width:"88px"});
                $(".smallCla ul").css({width:num*88+"px"});
            }
        },
        searchSf:function(pid,id){// 显示可选身份
            var sf = "";
            for(var i = 0; i < this.iden[pid].depa[id].people.length; i++){

                var did   = this.iden[pid].depa[id].people[i].id;
                var name = this.iden[pid].depa[id].people[i].name;
                sf += "<li did="+did+">"+name+"</li>"

            }
            $(".shenfen ul").html(sf);
        },
        closeModale:function(){
            var _this = this;
            $("body").on("click",".close",function(e){
                _this.sfArr     = [];
                _this.sfNameArr = [];
                for(var i = 0; i < _this.sfShowIdArr.length; i++){
                    _this.sfArr[i] = _this.sfShowIdArr[i];
                }
                for(var j = 0; j < _this.sfShowArr.length; j++){
                    _this.sfNameArr[j] = _this.sfShowArr[j];
                }
                $("#modalBox .sfList").hide();
                _this.modalHide("#modalBox");   
            });
            $("body").on("click","#modalBox .sfList .btn",function(e){
                _this.sfShowIdArr = [];
                _this.sfShowArr   = [];
                for(var i = 0; i < _this.sfArr.length; i++){
                    _this.sfShowIdArr[i] = _this.sfArr[i];
                }
                for(var j = 0; j < _this.sfNameArr.length; j++){
                    _this.sfShowArr[j] = _this.sfNameArr[j];
                }
                _this.modalHide("#modalBox");
                var html = _this.sfShowArr.join("，");
                $(".sele[dtype='type'] b").html(html);
                $(".sele[dtype='type'] input[name='type']").val(_this.sfShowIdArr.join(","));
                _this.moreInp(_this.sfShowIdArr);
            });
        },
        moreInp:function(arr){
            var _this = this;
            var str = "";
            if(arr.length == 1 && arr[0] == 51){
                $(".must .mustList").html("");
                $.each(_this.onlyNoName,function(i,v){
                    if(v.name == "photo"){
                        str += '<p class="list" did="'+i+'" dname="'+v.name+'"><span class="listName">'+v.lName+'</span><label class="sele" dtype="'+v.name+'"><b>请选择</b><span class="iconBox"><i></i></span><input type="file" name="'+v.name+'"></label></p>' 
                    }else{
                        str += '<p class="list" did="'+i+'" dname="'+v.name+'"><span class="listName">'+v.lName+'</span><input type="text" name="'+v.name+'"></p>'
                    }
                })
            }else{
                if($(".must .mustList").html() == ""){
                    _this.initAll();
                }
               $.each(arr,function(i,v){
                    $.each(_this.optional,function(j,v1){
                        $.each(v1.into,function(x,v2){
                            if(v == v2){
                                if(v1.name == "tel" || v1.name == "wcard"){ // 文本框
                                    str += '<p class="list" did="'+i+'" dname="'+v1.name+'"><span class="listName">'+v1.lName+'</span><input type="text" name="'+v1.name+'"></p>'
                                }else{
                                   str += '<p class="list" did="'+j+'" dname="'+v1.name+'"><span class="listName">'+v1.lName+'</span><label class="sele" dtype="'+v1.name+'"><b>请选择</b><span class="iconBox"><i></i></span><input type="file" name="'+v1.name+'"></label></p>' 
                               }
                            }
                        })
                    })
                }); 
           }
            $("#main .mabey").html(str);
            for( var i = $("#main .mabey p").length; i > 0 ; i--){
                for( var j = i-1; j >= 0; j--){
                    if($("#main .mabey p").eq(i).attr("dname") == $("#main .mabey p").eq(j).attr("dname")){
                        $("#main .mabey p").eq(i).remove();
                        break;
                    }
                }
            }
        },
        clickIden:function(){ // 点击身份
            var _this = this;
            $("body").on("click",".shenfen ul li",function(){
                var did  = $(this).attr("did");
                var name = $(this).html();
                for(var i = 0; i < _this.sfArr.length; i++){
                    if( did == _this.sfArr[i]){
                        _this.sfArr.splice(i,1);
                        _this.sfNameArr.splice(i,1);
                        _this.queryIden();
                        return;
                    }
                }

                // 单对单身份单选
                function one(arr){ // arr为不能同时选择的身份ID
                    $.each(arr,function(i,v){
                        if(did == v){
                            $.each(_this.sfArr,function(j,v1){
                                $.each(arr,function(x,v2){
                                    if(v != v2){
                                        if(v1 == v2){
                                            _this.sfArr.splice(j,1);
                                            _this.sfNameArr.splice(j,1);
                                        }
                                    }
                                })
                            })
                        }
                    })
                }
                function more(arr,id){
                    if(did != id){
                        $.each(arr,function(i,v){
                            if(did == v){
                                $.each(_this.sfArr,function(j,v1){
                                    if(v1 == id){
                                        _this.sfArr.splice(j,1);
                                        _this.sfNameArr.splice(j,1);
                                    }
                                })
                            }
                        });
                    }else{
                        $.each(arr,function(i,v){
                            $.each(_this.sfArr,function(j,v1){
                                if(v1 == v){
                                    _this.sfArr.splice(j,1);
                                    _this.sfNameArr.splice(j,1);
                                }
                            })
                        });
                    }
                }
                one([46,47,48]);
                one([50,51]);
                one([57,58,59]);
                more([35,37,39],52);

                _this.sfNameArr.push(name);
                _this.sfArr.push(did);
                _this.queryIden();
            })
        },
        queryIden:function(){ // 被选中身份高亮与显示
            $(".shenfen ul li").removeClass("idenActive");
            var liStr = "";
            if(this.sfNameArr.length > 0){
                var liW = 0;
                $(".sfList").show();
                for(var x = 0; x < this.sfNameArr.length; x++){
                    liStr += "<li>"+this.sfNameArr[x]+"</li>"
                }
                $(".sfList ul").html(liStr);
                for(var z = 0; z < $(".sfList ul li").length; z++){
                    liW += $(".sfList ul li").eq(z).outerWidth(true);
                }
                $(".sfList ul").css({width:liW+20+"px"});

            }else{
                $(".sfList").hide();
            }
            for(var i = 0; i < this.sfArr.length; i++){
                for(var j = 0; j < $(".shenfen ul li").length; j++){
                    if( this.sfArr[i] == $(".shenfen ul li").eq(j).attr("did")){
                        $(".shenfen ul li").eq(j).addClass("idenActive");
                    }
                }
            }
        },
        //省市区
        ajaxPlace:function(did){
            var _this = this;
            $("#sexPlace .alert").show().find("p").animate({
                bottom:"30px"
            })
            $.post("/manage/user/areas",{pid:did},function(data){
                if( data.status == 1){
                    $("#sexPlace .alert").find("p").animate({
                        bottom:"-100%"
                    },function(){
                        $("#sexPlace .alert").hide()
                    })

                    if(data.data.length == 0){
                        _this.modalHide("#sexPlace");
                        _this.ssqShow(".sele[dtype='place'] b");
                        return;
                    }

                    var s = "";
                    $.each(data.data,function(i,v){
                        s += "<li did="+v.id+">"+v.name+" </li>"
                    })
                    $("#sexPlace .content ul").html(s);
                }
            },"json")
        },
        clickPlace:function(){
            var _this = this;
            $("body").on("click","#sexPlace .content ul li",function(){
                var did  = $(this).attr("did");
                var name = $(this).html();
                _this.placeArr.push(name);
                _this.placeIdArr.push(did);
                _this.ssqShow("#sexPlace .text");
                _this.ajaxPlace(did);
            })
        },
        ssqShow:function(dom){
            var str = "";
            $.each(this.placeArr,function(i,v){
                str += "<span>"+v+"</span>"
            })
            $(dom).html(str);
        },
        clickTextLi:function(){ // 点击上方省市区修改
            var _this = this;
            $("body").on("click","#sexPlace .text span",function(){
                var num = $(this).index();
                if(num-1 < 0){
                    _this.ajaxPlace(1);
                }else{
                    var id = _this.placeIdArr[num-1];
                    _this.ajaxPlace(id);
                }
                var length = $("#sexPlace .text span").length;
                _this.placeArr.splice(num,length-num);
                _this.placeIdArr.splice(num,length-num);
                _this.ssqShow("#sexPlace .text");
            })
        },
        closePlace:function(){
            var _this = this;
            $("#sexPlace .close").click(function(){
                _this.modalHide("#sexPlace");
                _this.ssqShow(".sele[dtype='place'] b");
            })
        },
        subAlert:function(msg){
            var _this = this;           
            $("#msgBox span").html(msg)
                $("#msgBox").show().animate({
                    top:"30px"
                },function(){
                    setTimeout(function(){
                        $("#msgBox").animate({
                            top:"-100%"
                        },function(){
                            $("#msgBox").hide();
                            _this.msgAlertKg = true;
                        })
                    },1500)
            });
        },
        submit:function(){
            var _this = this;
            $(".subBox button").click(function(){
                if(_this.msgAlertKg){
                    _this.msgAlertKg = false;
                    for( var i = 0; i < $("input").length; i++ ){
                        if($("input").eq(i).val() == ""){
                            var name = $("input").eq(i).parents("p.list").find(".listName").html();
                            var msg = name + "不能为空"
                            _this.subAlert(msg);
                            return;
                        }
                    }
                    $("form").submit();
                }
            })
        },
        workCard:function(){
            for(var i = 1;i < 42; i++){
                this.optional[3].into.push(i);
            }
            this.optional[3].into.push(50);
        },
        init:function(){
            this.workCard();
            this.initAll();
            this.clickSele();
            this.closeModale();
            this.bigClaClick();
            this.smallClaClick();
            this.clickIden();
            this.clickPlace();
            this.ajaxPlace(1);
            this.clickTextLi();
            this.closePlace();
            this.submit();
            $("body").on("change","input[type='file']",function(e){
                var fileName = e.target.files[0].name;
                $(this).parents("label.sele").find("b").html(fileName);
            })
        }
    }
    user.init();
</script>
</body>

</html>